<template>
    <div class="updateTime" :style="{ '--mycolor':props.color.text,'--myback':props.color.back }">{{ weekData(props.item.update_ts) }}</div>
    <div class="imgBox">
        <img :src="props.item.cover"/>
        <span>{{ props.item.score }}</span>
        <span></span>
        <span></span>
    </div>
    <div class="infoBox">
        <span>{{ props.item.title }}</span>
        <p>
            <span>{{ props.item.lable }}</span>
            <span v-if="props.item.note">{{ props.item.note }}</span>
        </p>

    </div> 
</template>

<script lang="ts" setup>
import { weekData } from '@/utils/format'

interface Props{
    item:{
        title:string,
        cover:string,
        lable:string,
        text:[string],
        score:string,
        update_time:string,
        update_ts:number
        note?:string
    },
    color:{
        text:string,
        back:string
    }
}
const props = defineProps<Props>()


</script>

<style lang="scss" scoped>
@import url(../../../assets/css/comicHotCard.scss);
p{
    padding: 0;
    margin: 0;
}
.updateTime{
    width: 65px;
    @include flexRowCenter;
    margin-top: -15px;
    font-size: 14px;
    border-radius: 30px;
    padding: 2px 10px;
    color: var(--mycolor);
    background-color: var(--myback);
    white-space: nowrap
}
.infoBox{
    @include flexColumnCenter;
    width: 100%;
    height: 15%;
    & span:nth-child(1){
        width: 100%;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #18191C;
        cursor: pointer;
    }
    & p:nth-child(2){
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: start;
        padding: 0;
     
    }
    & p:nth-child(2) span:nth-child(1){
        text-align: left;
        color: #9499A0;
        font-size: 13px;
    }
    & span:nth-child(1):hover{
        color: #069cfae0;
    }
    & p:nth-child(2) span:nth-child(2){
        border-radius: 30px;
        margin-right: 10px;
        padding: 0 5px;
        width: 20%;
        background-color: rgb(79, 150, 79,0.2);
        color: green;
        font-size: 12px;
        white-space: nowrap;
        @include flexRowCenter;
    }
}
</style>